<template>
  <div>
    <div class="toolDiv">
      <div
        class="tool"
        :class="item.isClick ? 'toolClick' : ''"
        v-for="(item, i) in toolList"
        v-show="!item.ishiddenConference"
        :key="i"
        @click="toolClick(item)"
      >
        <template>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.label"
            placement="bottom"
          >
            <img
              v-if="!item.isClick"
              :src="
                require('@/assets/img/' + item.labelCommon + '.png')
              "
              class="toolIcon"
            />
            <img
              v-else
              :src="
                require('@/assets/img/' + item.labelChecked + '.png')
              "
              class="toolIcon"
            />
          </el-tooltip>
        </template>
      </div>
    </div>
    <!-- 统计 -->
    <Statistics v-if="isShowStatis" @close="close" />
    <conferenceDialog v-if="isShowConference" @close="closeConference" />
    <!-- 绘制 -->
    <DrawTool v-show="isShowDrawTool" @closeDrawTool="closeDrawTool" :isShowDrawTool="isShowDrawTool" :clearTableData="clearTableData"/>
    <MeasureTool v-show="isShowMeasureTool" @closeMeasure="closeMeasure" :isShowMeasureTool="isShowMeasureTool"/>
    <SwitchLayer v-show="isShowSwitchLayer"/>
  </div>
</template>

<script>
import MeasureTool from './tool/MeasureTools.vue'
import Statistics from './tool/Statistics.vue'
import conferenceDialog from './tool/conferenceDialog.vue'
import DrawTool from './tool/DrawTool.vue'
import SwitchLayer from './tool/SwitchLayer.vue'
import * as mapUtils from '@/components/mapOl/mapUtils'
export default {
  components: { Statistics, DrawTool, MeasureTool, SwitchLayer, conferenceDialog },
  props: {
    map: {
      type: Object,
      defalut: {}
    },
    ishiddenConference: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      toolList: [
        {
          id: '8',
          labelCommon: 'gj0-3',
          labelChecked: 'gj1-3',
          label: '统计',
          ishiddenConference: !this.ishiddenConference,
          isClick: false
        },
        // {
        //   id: '9',
        //   labelCommon: 'ic_lingyu_u',
        //   labelChecked: 'ic_lingyu_s',
        //   label: '范围分析',
        //   isClick: false
        // },
        {
          id: '1',
          labelCommon: 'gj0-0',
          labelChecked: 'gj1-0',
          label: '绘制',
          ishiddenConference: false,
          isClick: false
        },
        // {
        //   id: '2',
        //   labelCommon: 'ic_tuceng_u',
        //   labelChecked: 'ic_tuceng_s',
        //   label: '切换图层',
        //   isClick: false
        // },
        {
          id: '3',
          labelCommon: 'gj0-1',
          labelChecked: 'gj1-1',
          label: '测量',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '4',
          labelCommon: 'gj0-6',
          labelChecked: 'gj1-6',
          label: '放大',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '5',
          labelCommon: 'gj0-7',
          labelChecked: 'gj1-7',
          label: '缩小',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '6',
          labelCommon: 'gj0-2',
          labelChecked: 'gj1-2',
          label: '切换底图',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '7',
          labelCommon: 'gj0-4',
          labelChecked: 'gj1-4',
          label: '清除',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '10',
          labelCommon: 'gj0-5',
          labelChecked: 'gj1-5',
          label: '截屏',
          ishiddenConference: false,
          isClick: false
        },
        {
          id: '11',
          labelCommon: 'conference',
          labelChecked: 'conferenceActive',
          label: '会议',
          ishiddenConference: this.ishiddenConference,
          isClick: false
        }
        // {
        //   id: '10',
        //   labelCommon: 'ic_jieping_u',
        //   labelChecked: 'ic_jieping_s',
        //   label: '打印',
        //   isClick: false
        // }
        // {
        //   id: '11',
        //   labelCommon: 'juanlian',
        //   labelChecked: 'juanlian',
        //   label: '卷帘',
        //   isClick: false
        // }
        // {
        //   id: '12',
        //   labelCommon: 'fenping',
        //   labelChecked: 'fenping',
        //   label: '分幅',
        //   isClick: false
        // }
      ],
      isShowStatis: false, // 统计
      isShowConference: false, // 统计
      isShowDrawTool: false, // 绘制
      isShowMeasureTool: false, // 测量
      clearTableData: false,
      isShowSwitchLayer: false // 切换底图
    }
  },
  methods: {
    toolClick(item) {
      this.isShowStatis = false
      this.isShowConference = false
      this.isShowDrawTool = false
      this.isShowMeasureTool = false
      this.toolList.forEach((i) => {
        i.isClick = false
      })
      if (
        item.label !== '放大' &&
        item.label !== '缩小' &&
        item.label !== '清除' &&
        item.label !== '打印'
      ) {
        item.isClick = !item.isClick
      }
      if (item.label === '放大') {
        this.isShowSwitchLayer = false
        const view = this.map.getView()
        view.animate({
          zoom: view.getZoom() + 1,
          duration: 250
        })
      } else if (item.label === '缩小') {
        this.isShowSwitchLayer = false
        const view = this.map.getView()
        view.animate({
          zoom: view.getZoom() - 1,
          duration: 250
        })
      } else if (item.label === '统计') {
        this.isShowSwitchLayer = false
        this.isShowStatis = true
        item.isClick = this.isShowStatis
      } else if (item.label === '绘制') {
        this.isShowSwitchLayer = false
        this.isShowDrawTool = true
        item.isClick = this.isShowDrawTool
      } else if (item.label === '测量') {
        this.isShowSwitchLayer = false
        this.isShowMeasureTool = true
        item.isClick = this.isShowMeasureTool
      } else if (item.label === '清除') {
        this.isShowSwitchLayer = false
        mapUtils.clearAllLayers()
        this.clearTableData = true
      } else if (item.label === '切换底图') {
        this.isShowSwitchLayer = !this.isShowSwitchLayer
        item.isClick = this.isShowSwitchLayer
      } else if (item.label === '截屏') {
        mapUtils.onHandleScreenshot()
      } else if (item.label === '会议') {
        this.isShowSwitchLayer = false
        this.isShowConference = true
        item.isClick = this.isShowConference
        // this.$Bus.$emit('conferenceClick')
      }
    },
    // 关闭统计图表
    close() {
      this.isShowStatis = false
      this.toolList.forEach((i) => {
        i.isClick = false
      })
    },
    closeConference() {
      this.isShowConference = false
      this.toolList.forEach((i) => {
        i.isClick = false
      })
    },
    closeDrawTool() {
      this.toolList.forEach((item) => {
        item.isClick = false
      })
      this.isShowDrawTool = false
    },
    closeMeasure() {
      this.toolList.forEach((item) => {
        item.isClick = false
      })
      this.isShowMeasureTool = false
    }
  }
}
</script>

<style lang="scss" scoped>
.toolDiv {
   width: 23%;
height: 44px;
  border-radius: 4px;
  position: absolute;
  right: 22px;
  top: 24px;
  z-index: 1;
  display: flex;
  flex-direction: row;
    justify-content: space-around;
    align-items: center;
  .tool {

    width: 44px;
    height: 44px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(3,74,174,0.2) 0%, #034AAE 100%);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1);
    border: 1px solid rgba(5, 84, 166, 1);
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 10px;
    img{
      width: 20px;
      height: 20px;
    }
  }
  .toolClick {
    background: #4785fe;
    border-radius: 4px;
  }
}
</style>
